/**
 * 配置 antd 运行环境
 *
 * 包裹 antd <App> 的效果：
 * 1. 应用中的基础元素，如 <a> 应用 antd 定制样式
 * 2. 可通过 `const { message } = App.useApp()` 的方式快捷使用这些工具。（因为现在不建议直接用全局的 message 等静态方法了）
 *
 * EmotionCacheProvider 的作用：
 * 使得可以通过 useEmotionClassName() 取得 className，不需要再通过 <ClassName>
 */
import { Global as GlobalStyle } from '@emotion/react'
import { ConfigProvider, App } from 'antd'
import zhCN from 'antd/locale/zh_CN'
import { global as globalStyles, theme } from '@/desktop/styles'
import { EmotionCacheProvider } from '@/lib/emotion'

import 'antd/dist/reset.css'

export function AntdWrapper({ children }: { children: React.ReactNode }) {
  return <EmotionCacheProvider>
    <ConfigProvider locale={zhCN} theme={theme}>
      <GlobalStyle styles={globalStyles} />
      <App>{children}</App>
    </ConfigProvider>
  </EmotionCacheProvider>
}
